/*
	最左边侧航导览
-------------------------------------------------------------------------------
*/


<template>
<ul class="sider-l">

    <router-link 
    @click.native="handClick"
    class="sider-l-li"
    tag="li" 
    v-for="item in list"
    :key="item.path"  
    :to='item.path'
    > 

     <img 
      class="sider-l-li-img" 
      :src="item.icon"
     />     
    </router-link>

     <!-- 侧边栏logo -->
   <div class="sider-logo">
       <img src="../assets/logo/sider-logo.png" />
   </div>
</ul>    
</template>

<script>
import routes from '../router/routes'

export default {
    name:'sider',
    data(){
        return {
            list:routes.filter(item=>item.isNav === true )
        }
    },
    methods:{
        handClick(){ 
    //   alert('666')
        // if(this.list[2].path==='/chart/tu1'){
        //     alert('666')
        //       console.log(this.list[2].path)
        //   }
        }
    },
 
    created(){
    //    console.log(this)
    //   console.log(this.list)
     
    //     console.log(this.$route.params.container)
    },


}
  
    
</script>

<style lang="scss" scoped>

//      @font-face {
//   font-family: 'iconfont';  /* project id 994102 */
//   src: url('//at.alicdn.com/t/font_994102_xqqkzbjuccf.eot');
//   src: url('//at.alicdn.com/t/font_994102_xqqkzbjuccf.eot?#iefix') format('embedded-opentype'),
//   url('//at.alicdn.com/t/font_994102_xqqkzbjuccf.woff') format('woff'),
//   url('//at.alicdn.com/t/font_994102_xqqkzbjuccf.ttf') format('truetype'),
//   url('//at.alicdn.com/t/font_994102_xqqkzbjuccf.svg#iconfont') format('svg');
// }
    .sider-l{
     	    width:3%;
           
            background: #52514f;
            text-align: center;
            margin-right:5px;
            
            &-li{
                // height: 71px;
              
                  height: 7.25%;
               
                 line-height:95px;
                 width:100%;
               
                     display: flex;
                     justify-content: center;
                     align-items: center;
                
             
            }
            &-li:hover{
                background-color: #5f5d5d;
                
            }
            &-li:first-child{
                background: #7bbc46;
                  border-bottom: 5px solid #b6b6b6 ;
                     height:9%;
            }
              &-li:first-child:hover{
                background: #f08529;
            }
    }
    .icon{
        // font-family: 'iconfont'; 
        font-size: 32px;
        background: #52514f;
        color: red;
        border-radius: 50%;
    }
    .sider-logo{
        position: absolute;
        bottom: 20%;
        left: 1%;
    }

</style>

